<template>
  <div id="nav">
    <router-view />
  </div>
</template>
<script>
export default {
  name: "App",
};
</script>
<style leng="less">
* {
  margin: 0;
  padding: 0px;
}
/* 博客详情左侧抽屉 */
.el-overlay{
  width: 45%;
  left:unset !important;
  z-index: -1;
  opacity: 0.95;
  color: #555;
}
.el-drawer{
  width: 100% !important;
  /* height: 100vh; */
}
@media screen and (max-width: 960px) {
  #nav .main #aside,#nav .main #right{
    width: 100% !important;
  }  
  #nav .main #right{
    width: 100% !important;
    margin: 0;
    margin-top: 150px;
    min-height: unset;
  }
  #aside{
    height: 150px !important;
  }

  /* 移动端头部样式 */
  #aside .main>div:not(.top-box){
    display: none;
  }
   #aside .main .top-box .top{
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     height: 150px;
   }
  #aside .main .top-box .top>div{
    margin:0;
    padding: 0;
  }
  #aside .main .top-box .top>div:last-child{
    display: none;
  }
  #aside .main .top-box .top>div:nth-child(3){
    display: none;
  }

  /* 移动端主体样式 */
  #right #main {
    padding: 8px;
  }
  /* 留言页 */
  #right #main .top-title{
    font-size: 22px;
  }
  #right #main .box-card .el-card__body{
    padding: 8px;
  }
  #right #main .box-card .el-card__body .name-text{
    font-size: 14px;
  }

  /* 详情页 */
  #nav #main{
    min-height: unset;
    z-index: unset; 
    background: unset;
  }
  /* 留言按钮 */
  .show-drawer{
    z-index: 99 !important;
  }
  /* 留言面板 */
  .el-overlay{
    width: 100% !important;
    top: 150px !important;
  }
  #right #main .item-box{
    width: 98%;
    padding: 1vh 1vw;
  }
  #right #main .item-box .item .el-card__body{
    padding: 8px;
  }
  #main .top .title > h1{
    font-size: 22px !important;
  }
}


</style>
